﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>独狼|CSS按钮在线制作</title>
<meta charset="UTF-8">
<meta name="keywords" content="css button generator html style">
<link href="images/button.css" rel="stylesheet" type="text/css">
<link href="images/color_theme.css" rel="stylesheet" type="text/css">
<link href="images/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="images/jquery.min.js"></script>
<script type="text/javascript" src="images/jquery-ui.js"></script>
<script type="text/javascript" src="images/generator.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="images/colorpicker.css">
<script type="text/javascript" src="images/colorpicker.js"></script>
</head>
<body>
<div id="panel" style="background-image: url('images/top_bg_01.jpg');">
	<div id="logo" style="color: rgb(0, 92, 156);">CSS 按钮实时预览</div>
	<div id="target_area">
		<span id="target_btn" title="Change my color below..."></span>
	</div>
	<label><Strong>CSS按钮效果</Strong>通过下面的设置以及上面的演示效果，选择合适自己需要的按钮特效</label>
	<div id="color">
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>Color</b>
		</div>
			<div class="color_square" id="bgTopColor" title="BG Gradient 1" style="background-color: rgb(237, 237, 237);"></div>
			<div class="color_square" id="bgBottomColor" title="BG Gradient 2" style="background-color: rgb(223, 223, 223);"></div>
			<div class="color_square" id="fontColor" title="Font" style="background-color: rgb(119, 119, 119);"></div>
			<div class="color_square" id="borderColor" title="Border" style="background-color: rgb(220, 220, 220);"></div>
			<div class="color_square" id="boxShadowColor" title="Box Shadow" style="background-color: rgb(255, 255, 255);"></div>
			<div class="color_square" id="textShadowColor" title="Text Shadow" style="background-color: rgb(255, 255, 255);"></div>
		<button id="color_theme">选择颜色</button>
		<div id="color_theme_dialog" title="Select Color Theme">
			<span class="theme00">theme00</span>
			<span class="theme01">theme01</span>
			<span class="theme02">theme02</span>
			<span class="theme03">theme03</span>
			<span class="theme04">theme04</span>
			<span class="theme05">theme05</span>
			<span class="theme06">theme06</span>
			<span class="theme07">theme07</span>
			<span class="theme08">theme08</span>
			<span class="theme09">theme09</span>
			<span class="theme10">theme10</span>
			<span class="theme11">theme11</span>
			<span class="theme12">theme12</span>
			<span class="theme13">theme13</span>
			<span class="theme14">theme14</span>
			<span class="theme15">theme15</span>
			<span class="theme16">theme16</span>
			<span class="theme17">theme17</span>
			<span class="theme18">theme18</span>
			<span class="theme19">theme19</span>
			<span class="theme20">theme20</span>
			<span class="theme21">theme21</span>
			<span class="theme22">theme22</span>
			<span class="theme23">theme23</span>
			<span class="theme24">theme24</span>
			<span class="theme25">theme25</span>
			<span class="theme26">theme26</span>
			<span class="theme27">theme27</span>
			<span class="theme28">theme28</span>
			<span class="theme29">theme29</span>
		</div>
		<div class="slider_bar" style="float:right">
			<label for="slider-gradient">梯度:</label>
			<input type="text" id="slider-gradient" value="0" readonly/>
			<div id="slider_gradient"></div>
		</div>
	</div>
	<div class=setting>
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>大小</b>
		</div>
		<div class="slider_bar">
			<label for="font-size">字体大小:</label>
			<input type="text" id="font-size" value="16" readonly/>
			<div id="slider_font_size"></div>
			<div id="smaller_then_12" class="small_note"><br></div>
		</div>
		<div class="slider_bar">
			<label for="boder-radius">边界半径:</label>
			<input type="text" id="boder-radius" value="8" readonly/>
			<div id="slider_boder_radius"></div>
		</div>
		<div class="slider_bar">
			<label for="boder-size">Boder大小:</label>
			<input type="text" id="boder-size" value="1" readonly/>
			<div id="slider_boder_size"></div>
		</div>
		<div class="slider_bar">
			<label for="vertical-size">高度:</label>
			<input type="text" id="vertical-size" value="9" readonly/>
			<div id="slider_vertical_size"></div>
		</div>
		<div class="slider_bar">
			<label for="horizontal-size">宽度:</label>
			<input type="text" id="horizontal-size" value="18" readonly/>
			<div id="slider_horizontal_size"></div>
		</div>
	</div>
	<div class=setting>
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>阴影 (文本)</b>
			<input type="checkbox" id="use_shadow_text" class="regular-checkbox" checked><label for="use_shadow_text">使用</label>
		</div>
		<div class="slider_bar">
			<label for="vertical-position">顶部:</label>
			<input type="text" id="vertical-position" value="1" readonly/>
			<div id="slider_vertical_position"></div>
		</div>
		<div class="slider_bar">
			<label for="horizontal-position">左部:</label>
			<input type="text" id="horizontal-position" value="1" readonly/>
			<div id="slider_horizontal_position"></div>
		</div>
		<div class="slider_bar">
			<label for="blur-radius">模糊半径:</label>
			<input type="text" id="blur-radius" value="0" readonly/>
			<div id="slider_blur_radius"></div>
		</div>
	</div>
	<div class=setting>
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>阴影 (按钮)</b>
			<input type="checkbox" id="use_shadow_box" class="regular-checkbox" checked><label for="use_shadow_box">使用</label>
		</div>
		<div class="slider_bar">
			<label for="vertical-position-box">顶部:</label>
			<input type="text" id="vertical-position-box" value="1" readonly/>
			<div id="slider_vertical_position_box"></div>
		</div>
		<div class="slider_bar">
			<label for="horizontal-position-box">左部:</label>
			<input type="text" id="horizontal-position-box" value="1" readonly/>
			<div id="slider_horizontal_position_box"></div>
		</div>
		<div class="slider_bar">
			<label for="blur-radius-box">模糊半径:</label>
			<input type="text" id="blur-radius-box" value="0" readonly/>
			<div id="slider_blur_radius_box"></div>
		</div>
		<div class="slider_bar">
			<label for="spread-radius-box">扩散半径:</label>
			<input type="text" id="spread-radius-box" value="0" readonly/>
			<div id="slider_spread_radius_box"></div>
		</div>
		<div align=center style="padding:10px"><input type="checkbox" id="inset" checked /><label for="inset">插入</label></div>
	</div>
	<div id="text">
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>文本</b>
		</div>
		<input type=text id="btn_text" placeholder="Button Text" value="css button">
		<input type=text id="btn_class" placeholder="Class Name" value="css_btn_class">
		<select id="btn_font" style="width:230px;">
			<option value="Arial">Arial</option>
			<option value="Arial Black">Arial Black</option>
			<option value="Comic Sans MS">Comic Sans MS</option>
			<option value="Courier New">Courier New</option>
			<option value="Georgia">Georgia</option>
			<option value="Impact">Impact</option>
			<option value="Times New Roman">Times New Roman</option>
			<option value="Trebuchet MS">Trebuchet MS</option>
			<option value="Verdana">Verdana</option>
		</select>
		<input type="checkbox" id="btn_bold" /><label for="btn_bold">加粗</label>
	</div>
	<div id="code">
		<div class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:5px">
			<span class="ui-icon ui-icon-carat-1-e" style="float: left; margin: 2px 5px 0 0;"></span>
			<b>最终代码</b>
			<input type="checkbox" id="use_style" class="regular-checkbox" checked><label for="use_style">样式文本</label>
		</div>
		<input type=text id="code1" onclick="this.select();">
		<textarea id="code2" wrap="off" onclick="this.select();" spellcheck="false"></textarea>
	</div>
	<div>
		<label>CSS按钮能够让我们的页面内容中的按钮更加美化，比图片按钮体验更好</label><br>
	</div>
</div>
</body>
</html>